<template>
  <el-dialog
    title="梳齿工作站集中存储"
    :visible.sync="dialogFormVisible"
    width="50%"
    @close="back"
  >
    <div class="one" v-loading="loading" v-if="!show">
      <div class="o-item" v-for="(item, index) in dataList" :key="index">
        <div style="width: 200px; color: #267ed8">{{ item.name }}</div>
        <div>
          料箱数量
          <span style="color: #e02c40; margin-left: 10px"
            >{{ item.value }} / 8</span
          >
        </div>
        <div style="margin-left: auto">
          <el-button
            type="primary"
            size="small"
            :disabled="item.value == 0"
            @click="toTwo(item)"
            >全部拆垛集中存储</el-button
          >
        </div>
      </div>
      <div style="text-align: center; margin-top: 20px">
        <el-button
          type="primary"
          @click="toTwo2"
          :disabled="dataList.every((i) => i.value == 0)"
          >所有堆叠机全部集中存储</el-button
        >
      </div>
    </div>

    <div class="two" v-if="show">
      <el-page-header @back="goBack" content="" class="back"> </el-page-header>
      <div>
        <el-table
          size="small"
          :data="tableData"
          style="width: 100%"
          height="40vh"
          v-loading="loading2"
        >
          <el-table-column type="index" label="序号" width="60">
          </el-table-column>
          <el-table-column prop="amrMissionId" label="任务id">
          </el-table-column>
          <el-table-column prop="robot_id" label="AMR编号"> </el-table-column>
          <el-table-column prop="state" label="状态">
            <template slot-scope="scope">
              <el-tag
                v-if="scope.row.state == 0"
                color="#FFCC00"
                effect="dark"
                style="border-color: white"
                >排队中</el-tag
              >
              <el-tag
                v-if="scope.row.state == 1"
                color="#007AFF"
                effect="dark"
                style="border-color: white"
                >执行中</el-tag
              >
              <el-tag
                v-if="scope.row.state == 4"
                color="#FF9500"
                effect="dark"
                style="border-color: white"
                >取消中</el-tag
              >
              <el-tag
                v-if="scope.row.state == 5"
                color="#4CD964"
                effect="dark"
                style="border-color: white"
                >正常完成</el-tag
              >
              <el-tag
                v-if="scope.row.state == 6"
                color="#5AC8FA"
                effect="dark"
                style="border-color: white"
                >取消完成</el-tag
              >
              <el-tag
                v-if="scope.row.state == 7"
                color="#FF2D55"
                effect="dark"
                style="border-color: white"
                >出错完成</el-tag
              >
            </template>
          </el-table-column>
          <el-table-column v-if="type == 1" prop="" label="堆叠机"
            >{{ item.name }}
          </el-table-column>
          <el-table-column fixed="right" label="操作" width="120">
            <template slot-scope="scope">
              <el-popconfirm
                v-if="scope.row.state == 0 || scope.row.state == 1"
                title="确认取消当前任务？"
                @confirm="cancelTask(scope.row)"
              >
                <el-link slot="reference" :underline="false" type="danger"
                  >取消</el-link
                >
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </el-dialog>
</template>

<script>
import {
  analysis,
  selectTask,
  selectAllTask,
  cancelTask,
  selectOneInfo,
} from "@/common/api";

export default {
  name: "sc-Dialog",
  props: {},
  components: {},
  data() {
    return {
      loading: false,
      loading2: true,
      show: false,
      type: "",
      dialogFormVisible: false,
      dataList: [
        {
          name: "线缆实验室",
          value: "0",
          index: 30,
          sign: "stackerZero",
        },
        {
          name: "材质分析实验室",
          value: "0",
          index: 33,
          sign: "stackerThree",
        },
        {
          name: "电缆保护管实验室",
          value: "0",
          index: 36,
          sign: "stackerSix",
        },
        {
          name: "结构力学实验室",
          value: "0",
          index: 39,
          sign: "stackerNine",
        },
      ],
      timer: null,
      item: {},
      tableData: [],
    };
  },
  computed: {},
  watch: {},
  created() {},
  methods: {
    getCount() {
      this.loading = true;
      analysis()
        .then((res) => {
          this.loading = false;
          if (res.success) {
            this.dataList.forEach((item) => {
              item.value = res.data[item.sign];
            });
          } else {
            this.$errorMsg(res.message);
          }
        })
        .catch(() => {
          this.loading = false;
        });
    },
    toTwo(item) {
      this.type = 1;
      this.item = item;
      this.show = true;
      this.loading2 = true;
      selectTask(item.index).then((res) => {
        this.loading2 = false;
        if (res.success) {
          this.tableData = res.data;
          this.getOne();
        } else {
          this.$errorMsg(res.message);
        }
      });
    },
    toTwo2() {
      this.type = 2;
      this.show = true;
      this.loading2 = true;
      selectAllTask().then((res) => {
        this.loading2 = false;
        if (res.success) {
          this.tableData = res.data;
          this.getOne();
        } else {
          this.$errorMsg(res.message);
        }
      });
    },
    getOne() {
      this.tableData.forEach((i) => {
        let params = {
          id: i.amrMissionId,
        };
        selectOneInfo(params).then((res) => {
          let obj = JSON.parse(res.data);
          this.$set(i, "robot_id", obj.robot_id);
          this.$set(i, "state", obj.state);
        });
      });
    },
    cancelTask(item) {
      cancelTask({ missionId: item.amrMissionId }).then((res) => {
        if (res.success) {
          this.$successMsg("取消成功");
          if (this.type == 1) {
            this.toTwo(this.item);
          }
          if (this.type == 2) {
            this.toTwo2();
          }
        } else {
          this.$errorMsg(res.message);
        }
      });
    },
    goBack() {
      this.show = false;
    },
    close() {
      if (this.timer) {
        clearInterval(this.timer);
        this.timer = null;
      }
    },
    back() {
      this.close();
    },
  },
};
</script>


<style lang="scss" scoped>
.one {
  .o-item {
    display: flex;
    align-items: center;

    padding: 10px 10px;
    background-color: #fcfcfc;
    margin: 8px 0px;
  }
}
.two {
}
.back {
  margin: -20px 0px 10px 0px;
}
</style>
